import React, { Component } from 'react'
import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  TextInput,
  KeyboardAvoidingView
} from 'react-native'
import { connect } from 'react-redux'

import Toast from 'react-native-simple-toast'
import { theme_app, theme_text } from '../../utils/appTheme'
import HeaderDefault from '../../components/header/HeaderDefault'
import { dateTransform } from '../../utils/commonMethod'
import { patientBaseInfo, addSign } from '../../netServer/signs_net'

class SignsEentry extends Component {
  constructor(props) {
    super(props)
    this.state = {
      body_height: '', //身高
      body_weight: '', //体重
      body_temperature: '', //体温
      body_heartRate: '', //心率
      body_pulse: '', //脉搏
      body_breathing: '', //呼吸
      body_bowelMovement: '', //大便
      body_bloodPressure: '', //血压

      pinfo_hosNum: '',
      pinfo_bed: '',
      pinfo_name: '',
      pinfo_age: '',
      pinfo_sex: '',
      enntry_date: new Date()
    }

    this._loadPatienBaseInfo = this._loadPatienBaseInfo.bind(this)
    this._commitTiZhen = this._commitTiZhen.bind(this)
  }

  static navigationOptions = ({ navigation }) => ({
    gesturesEnabled: false,
    header: (
      <HeaderDefault
        title="体征录入"
        backBtnOnPress={() => {
          // navigation.navigate('Home')
          navigation.goBack(navigation.state.params.currentRouterKey)
        }}
        rihghtBtnOnPress={() => {
          navigation.state.params.clickRightMethod()
        }}
        rightImg={require('./src/add.png')}
        flag={true}
      />
    )
  })

  // 录入信息
  _renderInputItem1(
    tilteStr,
    textInputChange,
    inputeValue,
    placeholderStr,
    unitstr,
    keyboardTypeS = 'default'
  ) {
    return (
      <View style={styles.inputItem1}>
        <Text style={{ width: 50 }}>{tilteStr}</Text>
        <TextInput
          style={styles.textInput}
          placeholder={placeholderStr}
          placeholderTextColor="rgb(206,206,211)"
          onChangeText={textInputChange}
          value={inputeValue}
          keyboardType={keyboardTypeS}
          underlineColorAndroid="transparent"
          selectionColor="rgb(35,151,246)"
          clearButtonMode="while-editing"
        />

        <Text style={{ width: 60, textAlign: 'right' }}>{unitstr}</Text>
      </View>
    )
  }

  // 床号、姓名、年龄、性别
  _renderInputItem2(title1, titele2, value1, value2) {
    return (
      <View style={styles.inputItem1}>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <Text style={{ width: 50 }}>{title1}</Text>
          <Text style={{ color: theme_text.default_Color }}>{value1}</Text>
        </View>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <Text style={{ width: 50 }}>{titele2}</Text>
          <Text style={{ color: theme_text.default_Color }}>{value2}</Text>
        </View>
      </View>
    )
  }

  // 疗养号
  _renderInputItem3(title1, value1) {
    return (
      <View style={styles.inputItem1}>
        <Text style={{ width: 70 }}>{title1}</Text>
        <Text style={{ color: theme_text.default_Color }}>{value1}</Text>
      </View>
    )
  }

  componentDidMount() {
    this._loadPatienBaseInfo()

    this.props.navigation.setParams({ clickRightMethod: this._commitTiZhen })
  }

  _commitTiZhen() {
    let paramss = new FormData()
    paramss.append('userId', this.props.user_info.user_id)
    paramss.append('patientNo', this.props.navigation.state.params.pno)
    paramss.append(
      'recordDate',
      dateTransform(this.state.enntry_date, 'yyyy-MM-dd hh:mm:ss')
    )

    let subData = [
      {
        name: '身高',
        value: this.state.body_height
      },
      {
        name: '体重',
        value: this.state.body_weight
      },
      {
        name: '体温',
        value: this.state.body_temperature
      },
      {
        name: '心率',
        value: this.state.body_heartRate
      },
      {
        name: '脉搏',
        value: this.state.body_pulse
      },
      {
        name: '呼吸',
        value: this.state.body_breathing
      },
      {
        name: '大便',
        value: this.state.body_bowelMovement
      },
      {
        name: '血压',
        value: this.state.body_bloodPressure
      }
    ]

    for (let index = 0; index < subData.length; index++) {
      const element = subData[index]
      paramss.append('data[' + index + '][name]', element.name)
      paramss.append('data[' + index + '][value]', element.value)
    }

    // paramss.append('data', subData)

    addSign(paramss, resp => {
      let { code, data, msg } = resp
      if (code == '0') {
        this.setState({
          body_height: '', //身高
          body_weight: '', //体重
          body_temperature: '', //体温
          body_heartRate: '', //心率
          body_pulse: '', //脉搏
          body_breathing: '', //呼吸
          body_bowelMovement: '', //大便
          body_bloodPressure: '' //血压
        })
        Toast.showWithGravity('提交成功', 0.3, Toast.CENTER)
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER)
      }
    })
  }

  _loadPatienBaseInfo() {
    let formData = new FormData()
    formData.append('pno', this.props.navigation.state.params.pno)

    patientBaseInfo(formData, resp => {
      let { code, msg, data = {} } = resp

      if (code == '0') {
        let { identityInfo = {}, contactInfo = {} } = data
        let { name, age, bed, sex } = identityInfo
        let { ihealthNo } = contactInfo

        this.setState({
          pinfo_hosNum: ihealthNo,
          pinfo_bed: bed,
          pinfo_name: name,
          pinfo_age: age,
          pinfo_sex: sex
        })
      }
    })
  }

  render() {
    return (
      <KeyboardAvoidingView
        keyboardVerticalOffset={100}
        behavior="padding"
        style={{ flex: 1 }}
      >
        <ScrollView
          keyboardShouldPersistTaps="always"
          keyboardDismissMode="on-drag"
          style={{ flex: 1, backgroundColor: theme_app.bg_color }}
          contentContainerStyle={styles.container}
        >
          <View>
            <View style={{ height: 10 }} />

            {this._renderInputItem2(
              '床号',
              '姓名',
              this.state.pinfo_bed,
              this.state.pinfo_name
            )}
            {this._renderInputItem2(
              '年龄',
              '性别',
              this.state.pinfo_age,
              this.state.pinfo_sex
            )}
            {this._renderInputItem3('疗养号', this.state.pinfo_hosNum)}
            {this._renderInputItem3(
              '录入日期',
              dateTransform(this.state.enntry_date, 'yyyy-MM-dd hh:mm')
            )}
          </View>

          <View>
            <View style={{ height: 10 }} />
            {this._renderInputItem1(
              '身高',
              text => {
                this.setState({ body_height: text })
              },
              this.state.body_height,
              '身高',
              'cm',
              'numeric'
            )}
            {this._renderInputItem1(
              '体重',
              text => {
                this.setState({ body_weight: text })
              },
              this.state.body_weight,
              '体重',
              'kg',
              'numeric'
            )}
            {this._renderInputItem1(
              '体温',
              text => {
                this.setState({ body_temperature: text })
              },
              this.state.body_temperature,
              '体温',
              '℃',
              'numeric'
            )}
            {this._renderInputItem1(
              '心率',
              text => {
                this.setState({ body_heartRate: text })
              },
              this.state.body_heartRate,
              '心率',
              '次/分',
              'numeric'
            )}
            {this._renderInputItem1(
              '脉搏',
              text => {
                this.setState({ body_pulse: text })
              },
              this.state.body_pulse,
              '脉搏',
              '次/分',
              'numeric'
            )}
            {this._renderInputItem1(
              '呼吸',
              text => {
                this.setState({ body_breathing: text })
              },
              this.state.body_breathing,
              '呼吸',
              '次/分',
              'numeric'
            )}
            {this._renderInputItem1(
              '大便',
              text => {
                this.setState({ body_bowelMovement: text })
              },
              this.state.body_bowelMovement,
              '大便',
              '次/日',
              'numeric'
            )}
            {this._renderInputItem1(
              '血压',
              text => {
                this.setState({ body_bloodPressure: text })
              },
              this.state.body_bloodPressure,
              '血压',
              'mmHg',
              'numeric'
            )}
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: theme_app.bg_color
  },
  inputItem1: {
    flexDirection: 'row',
    width: screenWidth,
    height: 45,
    backgroundColor: 'white',
    borderBottomColor: theme_app.separationLine_color,
    borderBottomWidth: 1,
    paddingLeft: 15,
    paddingRight: 15,
    alignItems: 'center'
  },
  textInput: {
    // backgroundColor: 'green',
    color: 'gray',
    fontSize: theme_text.default_font,
    alignSelf: 'center',
    width: screenWidth - 150,
    height: 40
  }
})

function select(store) {
  return {
    user_info: store.userInfo.user_info
  }
}

export default connect(select)(SignsEentry)
